import { useState } from 'react';
import {
  Container,
  Box,
  Button,
  Typography,
  Paper,
} from '@mui/material';
import { Add as AddIcon } from '@mui/icons-material';
import ResourceList from '../components/ResourceList';
import SaveResource from '../components/SaveResource';
import { useAuth } from '../../auth/AuthContext';

const ResourcePage = () => {
  const [saveDialogOpen, setSaveDialogOpen] = useState(false);
  const { user } = useAuth();

  const handleSaveSuccess = () => {
    // 刷新ResourceList组件
    window.location.reload();
  };

  return (
    <Container maxWidth="lg" sx={{ py: 4 }}>
      <Paper sx={{ p: 3 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
          <Typography variant="h5" component="h1">
            资源列表
          </Typography>
          {user && (
            <Button
              variant="contained"
              startIcon={<AddIcon />}
              onClick={() => setSaveDialogOpen(true)}
            >
              添加资源
            </Button>
          )}
        </Box>

        <ResourceList />

        <SaveResource
          open={saveDialogOpen}
          onClose={() => setSaveDialogOpen(false)}
          onSaveSuccess={handleSaveSuccess}
        />
      </Paper>
    </Container>
  );
};

export default ResourcePage;